<template>
  <el-scrollbar>
    <div class="login">
      <div class="login-from">
        <img class="login-from__logo" src="@/assets/images/logo-full.png"/>
        <!-- <transition name="el-fade-in" mode="out-in" appear> -->
          <component
            :is="activeData.component"
            :key="activeData.key" />
        <!-- </transition> -->
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
// 登录
import Logo from './components/logo/index.vue'
// 注册
import Register from './components/register/index.vue'

// 当前展示组件(默认登录)
const layoutKey = ref('register')
const layoutData = reactive([
  { key: 'logo', component: markRaw(Logo) },
  { key: 'register', component: markRaw(Register) }
])
// 当前展示组件数据
const activeData = computed(() => {
  return layoutData.find(x => x.key == layoutKey.value)
})

// 切换指定组件(默认logo)
function toComponent(key = 'logo') {
  layoutKey.value = key
}
provide('toComponent', toComponent)
</script>

<style lang="scss" scoped>
.login{
  width: 100vw;
  height: 100vh;
  min-width: 1200px;
  min-height: 700px;
  background-image: url('@/assets/images/login-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  position: relative;
  &-from{
    width: 400px;
    padding: 20px 30px;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 0px 40px 1px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden;
    position: absolute;
    right: 15%;
    top: 50%;
    transform: translateY(-50%);
    &__logo{
      height: 80px;
      display: block;
      margin: 0 auto 20px;
    }
  }
}
</style>
